<template>
  <div>
    <v-card>
      <v-card-title>
        <v-btn color="primary" @click="addBrand()">新增品牌</v-btn>
        <!--空间隔离组件-->
        <v-spacer/>
        <!--搜索框，与search属性关联-->
        <v-flex xs4>
          <v-text-field
            label="输入关键字搜索"
            v-model="key"
            single-line
            append-icon="search"
            hide-details
          />
        </v-flex>

      </v-card-title>
      <!--分割线-->
      <v-divider/>
      <v-data-table
        :headers="headers"
        :items="brands"
        :pagination.sync="pagination"
        :total-items="totalBrands"
        :loading="loading"
        class="elevation-1"
      >
        <template slot="items" slot-scope="props">
          <td class="text-xs-center">{{ props.item.id }}</td>
          <td class="text-xs-center">{{ props.item.name }}</td>
          <td class="text-xs-center"><img :src="props.item.image" alt=""></td>
          <td class="text-xs-center">{{ props.item.letter }}</td>
          <td class="justify-center layout">
            <v-btn color="info">编辑</v-btn>
            <v-btn color="warning">删除</v-btn>
          </td>
        </template>
      </v-data-table>
      <!--弹出的对话框-->
      <v-dialog max-width="500" v-model="show" persistent>
        <v-card>
          <!--对话框的标题-->
          <v-toolbar dense dark color="primary">
            <v-toolbar-title>新增品牌</v-toolbar-title>
            <v-spacer/>
            <!--关闭窗口的按钮-->
            <v-btn icon @click="closeWindow"><v-icon>close</v-icon></v-btn>
          </v-toolbar>
          <!--对话框的内容，表单-->
          <v-card-text class="px-5">
            <MyBrandForm @close="closeWindow"/>
          </v-card-text>
        </v-card>
      </v-dialog>
    </v-card>
  </div>
</template>

<script>
    // 导入自定义的表单组件
    import MyBrandForm from './MyBrandForm'
    export default {
        name: "Brand2",
        components: {
            MyBrandForm
        },
        data() {
            return {
                headers: [
                    {text: '品牌id', value: 'id', align: 'center', sortable: true},
                    {text: '品牌名称', value: 'name', align: 'center', sortable: true},
                    {text: '品牌LOGO', value: 'image', align: 'center', sortable: false},
                    {text: '品牌首字母', value: 'letter', align: 'center', sortable: false},
                    {text: '操作', value: 'id', align: 'center', sortable: false},
                ],
                brands: [],
                pagination: {},
                totalBrands: 0,
                loading: false,
                key:'',
                show: false, // 是否弹出窗口
                brand: {}, // 品牌信息
                isEdit: false // 判断是编辑还是新增
            }
        },
        created() {
            // 去后台查询
            this.loadBrands();
        },
        watch: {
          key() {
              if (this.pagination.page !== 1) {
                  this.pagination.page = 1;
              } else {
                  this.loadBrands();
              }
          },
          pagination: {
              deep: true,
              handler() {
                  if (this.pagination.page !== 1) {
                      this.loadBrands();
                  }
              }
          }
        },
        methods:{
            loadBrands() {
                this.loading = true;
                this.$http.get("/item/brand/page",{
                  params: {
                      page: this.pagination.page, // 当前页
                      rows: this.pagination.rowsPerPage, // 每页大小
                      sortBy: this.pagination.sortBy, // 排序字段
                      desc: this.pagination.descending, //是否降序
                      key: this.key // 搜索条件
                  }
                }).then(resp => {
                  this.brands = resp.data.items;
                  this.totalBrands = resp.data.total;
                  this.loading = false;
                }).catch(reason => {
                    this.brands = [];
                    this.loading = false;
                })
            },
            addBrand(){
                this.brand = {};
                this.show = true;
            },
            closeWindow(){
                // 关闭窗口
                this.show = false;
                // 重新加载数据
                this.loadBrands();
            }
        }
    }
</script>

<style scoped>

</style>
